<template>
    <div class="TopBar">
        <div class="top-bar-back">
            <a-button type="link" @click="goBack">返回活动列表</a-button>
        </div>
        <div className="decorate-action">
            <a-button
            >
                预览
            </a-button>
            <a-button @click="handleSave">保存</a-button>
            <a-button type="primary" @click="handleImport">导入</a-button>
            <a-button type="primary" @click="handleExport">导出</a-button>
      </div>
    </div>
</template>

<script setup>
import { toRefs } from 'vue';

import { useRouter } from 'vue-router';

import useCom from '@/store/com';

const router = useRouter();

const comStore = useCom();
const { selectedComSchema } = toRefs(comStore);

const goBack = async () => {
    router.push('/');
}
// 保存
const handleSave = () => {
    console.log('save-----------', selectedComSchema.value);
}
// 导入
const handleImport = () => {
    const input = document.createElement("input")
    input.type = "file";
    input.accept = "application/json";
  
    input.addEventListener("change", async (event) => {
      const target = event.target;
      const file = target.files?.[0];
      if (!file) {
        message.error("请选择文件！")
        return;
      }
  
      const data = await readJsonFromFile(file)
      if (data) {
        handleFileData(data)
      }
    })
  
    input.click()
}
const readJsonFromFile = (file) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.onload = (event) => {
        try {
          const data = JSON.parse(event.target?.result)
          resolve(data)
        } catch (error) {
          reject(new Error("文件格式不正确！"))
        }
      };
      reader.onerror = () => {
        reject(new Error("读取文件失败！"))
      };
      reader.readAsText(file)
    })
};
const handleFileData = (data) => {
    if (Array.isArray(data)) {
        console.log('导入文件数据--------', data);
      message.success("导入成功！")
    } else {
      message.error("文件格式不正确！")
    }
};
  
// 导出
const handleExport = () => {
    const dataStr = JSON.stringify(selectedComSchema.value)
    const dataUri = "data:application/json;charset=utf-8," + encodeURIComponent(dataStr)
  
    const exportFileDefaultName = "data.json";
  
    const linkElement = document.createElement("a")
    linkElement.setAttribute("href", dataUri)
    linkElement.setAttribute("download", exportFileDefaultName)
    linkElement.click()
}

</script>

<style lang="less" scoped>
.TopBar {
    position: fixed;
    top: 0;
    left: 0;
    height: 55px;
    width: 100%;
    border-bottom: 1px solid #ebedf0;
    display: flex;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0 1px 0 0 rgb(0 0 0 / 10%);
    padding: 0 32px;
    z-index: 1;
}

.decorate-action {
    position: absolute;
    right: 16px;
    top: 12px;
    display: flex;
    .ant-btn{
        margin-left: 16px;
    }
}

.top-bar-back {
    vertical-align: middle;
    font-size: 14px;
    color: #4f4f4f;
    line-height: 56px;
    position: absolute;
    left: 18px;
    cursor: pointer;
}
</style>